import React from 'react'
import './Header.css'
import { Link,NavLink,useHistory } from 'react-router-dom'
import { useAuth } from './AuthProvider'


export const Header = () => {
    const history=useHistory();
            //! 退出时要更新状态，所以引进set
    const {islogin,setIslogin}=useAuth();
    // console.log(islogin);
    const logout=()=>{
        setIslogin(false);
        localStorage.removeItem('islogin');
        history.replace('/login');
    }

    return (
        <div className="header-wrap">
            <div className="header">
                <img className="logo" src="//static2.cnodejs.org/public/images/cnodejs_light.svg" alt=""/>
                <div className="nav">
                    {/*//! NavLink提供样式设置 */}
                    <NavLink exact activeStyle={{color:'red'}}  to="/">首页</NavLink>
                    <NavLink activeStyle={{color:'red'}}  to='/new'>新手入门</NavLink>
                    <NavLink activeStyle={{color:'red'}}  to='/collect'>收藏</NavLink>
                    <NavLink activeStyle={{color:'red'}}  to='/user'>个人中心</NavLink>
                    {
                        islogin
                        ?<>
                            <a href="">设置</a>
                            <a href="" onClick={logout}>退出</a>
                        </>
                        :<NavLink activeStyle={{color:'red'}}  to='/login'>登录</NavLink>
                    }
                </div>
            </div>
        </div>
    )
}
